﻿import QtQuick
import QtQuick.Controls
import QtCharts

Rectangle{
    id: control
    color: "transparent"
    //clip: true
    property bool isRunning : true
    property bool titleBgVisibled : true
    property string minDate: "2022-01-01 01:10:00" //yyyy-MM-dd hh:mm:ss
    property string maxDate: "2022-10-01 22:26:35" //yyyy-MM-dd hh:mm:ss
    property int minY : 0
    property int maxY : 100
    property string unitFormat              //Y轴单位
    property var lendArry : []
    property var chartSeries : []
    property AbstractAxis xAxisDelegate : DateTimeAxis{
        id: xAxis
        min: Date.fromLocaleString(Qt.locale(), minDate, "yyyy-MM-dd hh:mm:ss")
        max: Date.fromLocaleString(Qt.locale(), maxDate, "yyyy-MM-dd hh:mm:ss")
        labelsColor: "#99BCD7"
        format: "hh:mm:ss"
        labelsFont.weight: Font.Bold
        labelsFont.pixelSize: 10
        labelsFont.family:"Microsoft YaHei UI"
        gridVisible: false
    }
    property AbstractAxis yAxisDelegate :  ValueAxis{
        id: yAxis
        min: minY
        max: maxY
        labelsColor: "#FF99BCD7"
        labelFormat: "%.1f" + unitFormat
        labelsFont.weight: Font.Bold
        labelsFont.pixelSize: 12
        labelsFont.family:"Microsoft YaHei UI"
        minorGridVisible: false
        gridVisible: false

    }    

    function seriesCount(){
        return chartSeries.length;
    }

    function series(index){
        return chartView.series(index);
    }

    function axisX() {
        return chartView.axisX();
    }
    function axisY() {
        return chartView.axisY();
    }

    function createSeries(type, name){
        let idx = -1;
        let i = 0;
        for(;i < chartSeries.lenght;i++){
            if(chartSeries[i].name === name){
                idx = index;
                break;
            }
         }
        if(idx == -1){
            //let area = chartView.createSeries(ChartView.SeriesTypeArea, name, xAxisDelegate, yAxisDelegate);
            let line = chartView.createSeries(type, name, xAxisDelegate, yAxisDelegate);
            //area.upperSeries = line;
            return line;
        }
        else
            return chartSeries[idx];
    }
    function removeSeries(name){
        let series;
        for(let i = 0;i < chartSeries.lenght;i++){
            if(chartSeries[i].name === name){
                series = chartSeries[i];
                break;
            }
        }
        chartView.removeSeries(series);
    }

    Column{
        id: chartViewColumn
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        width: parent.width
        height: parent.height
        topPadding: 10
        Rectangle{
            id: legend
            property int seriesCount: 0
            property variant seriesNames: []
            property variant seriesColors: []
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width
            color: "transparent"
            height: 25
            antialiasing: true
            function addSeries(seriesName, color) {
                var names = seriesNames;
                names[seriesCount] = seriesName;
                seriesNames = names;
                var colors = seriesColors;
                colors[seriesCount] = color;
                seriesColors = colors;
                seriesCount++;
            }
            Component {
                id: legendDelegate
                Rectangle {
                    id: rect
                    property string name: legend.seriesNames[index]
                    property color markerColor: legend.seriesColors[index]
                    implicitHeight: 25
                    implicitWidth: label.implicitWidth + marker.implicitWidth
                    color: "transparent"
                    width: index === 0 ? (label.width + marker.width)*1.3:label.width + marker.width
                    Row {
                        id: row
                        spacing: 5
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        Rectangle {
                            id: marker
                            anchors.verticalCenter: parent.verticalCenter
                            color: rect.markerColor
                            opacity: 0.7
                            radius: 4
                            width: 20
                            height: 4
                        }
                        Text {
                            id: label
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.verticalCenterOffset: -1
                            text: rect.name
                            color: "#99BCD7"
                            font.pixelSize: 14
                            font.family: "Microsoft YaHei UI"
                        }
                    }
                }
            }
            Row {
                id: legendRow                
                height: 25
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 10
                clip: true
                layoutDirection: Qt.RightToLeft
                Repeater {
                    id: legendRepeater
                    model: legend.seriesCount
                    delegate: legendDelegate
                }
            }
        }
        ChartView {
            id: chartView
            width: parent.width
            height: parent.height - 44
            antialiasing: true
            margins.left: 0
            margins.right: 0
            margins.top:0
            margins.bottom:0
            localizeNumbers: true
            //theme:ChartView.ChartThemeDark
            backgroundColor: "transparent"
            legend.alignment: Qt.AlignTop
            legend.labelColor: "#99BCD7"
            legend.visible: false
            legend.font.pixelSize: 14
            legend.markerShape: Legend.MarkerShapeFromSeries           

            onSeriesAdded: function(series){              
                chartSeries.push(series);
                legend.addSeries(series.name, series.color);
//                series.hovered.connect(function(point, state){
//                    if(state){
////                        yTooltip.visible = true;
//                        yTooltip.text = point.y.toFixed(2);
//                    }
//                    else{
////                        yTooltip.visible = false;
//                    }

//                });
            }
            axes: [control.xAxisDelegate, control.yAxisDelegate]
            Component.onCompleted: {
                control.lendArry.forEach(function(name,index){
                    control.createSeries(ChartView.SeriesTypeSpline, name);
                });
            }

//            Repeater{
//                model:control.lendArry
//                LineSeries {
//                    name: modelData
//                    axisX:control.xAxisDelegate
//                    axisY:control.yAxisDelegate
//                    XYPoint { x: 0; y: 65.6 }
//                    XYPoint { x: Date.parse("2022-01-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 2.1 }
//                    XYPoint { x: Date.parse("2022-05-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 30.3 }
//                    XYPoint { x: Date.parse("2022-05-21 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 20.1 }
//                    XYPoint { x: Date.parse("2022-06-08 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 45.9 }
//                    XYPoint { x: Date.parse("2022-08-26 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 33.0 }
//                    XYPoint { x: Date.parse("2022-09-28 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 97.3 }
//                }
//            }

//            LineSeries {
//                name: "电流"
//                axisX:control.xAxisDelegate
//                axisY:control.yAxisDelegate
//                XYPoint { x: 0; y: 65.6 }
//                XYPoint { x: Date.parse("2022-01-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 2.1 }
//                XYPoint { x: Date.parse("2022-05-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 30.3 }
//                XYPoint { x: Date.parse("2022-05-21 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 20.1 }
//                XYPoint { x: Date.parse("2022-06-08 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 45.9 }
//                XYPoint { x: Date.parse("2022-08-26 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 33.0 }
//                XYPoint { x: Date.parse("2022-09-28 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 97.3 }
//            }
//            LineSeries {
//                name: "电压"
//                axisX: control.xAxisDelegate
//                axisY: control.yAxisDelegate
//                XYPoint { x: 0; y: 0 }
//                XYPoint { x: Date.parse("2022-01-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 20.1 }
//                XYPoint { x: Date.parse("2022-01-10 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 29.1 }
//                XYPoint { x: Date.parse("2022-03-01 14:50:00", "yyyy-MM-dd hh:mm:ss"); y: 69.1 }
//                XYPoint { x: Date.parse("2022-04-09 23:50:00", "yyyy-MM-dd hh:mm:ss"); y: 88.2 }
//                XYPoint { x: Date.parse("2022-05-01 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 33.0 }
//                XYPoint { x: Date.parse("2022-05-06 02:50:00", "yyyy-MM-dd hh:mm:ss"); y: 33.0 }
//                XYPoint { x: Date.parse("2022-05-21 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 97.3}
//                XYPoint { x: Date.parse("2022-06-07 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 45.9 }
//                XYPoint { x: Date.parse("2022-08-06 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 30.3 }
//                XYPoint { x: Date.parse("2022-09-18 01:50:00", "yyyy-MM-dd hh:mm:ss"); y: 65.3}
//                XYPoint { x: Date.parse("2022-09-28 16:50:00", "yyyy-MM-dd hh:mm:ss"); y: 65.3}
//            }
        }
    }
}
